<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>确认完成拣货</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script type="text/javascript">
        var index = 0;
        var layer;
        try{
         index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        }catch (e) {
        }

        $(function () {
            $("#s-define").focus();
            $("#s-define").click(function () {
                //弹出
                var number = $("#pickNumber").val();
                $("#s-define").hide();
                $("#s-define_").show();

                if(confirm("是否确定出库？")){
                    var orderId = $("#orderId").val();
                    $.ajax({
                        url: '/ajax_stock_out/order_stock_out_confirm',
                        type: 'post',
                        dataType: 'json',
                        contentType: 'application/json',
                        data: JSON.stringify({id:orderId}),
                        success: function (res) {
                            console.log(res);
                            if(res.code == 0){
                                // layer.msg("确认成功");
                                parent.layer.close(index);
                                parent.updStatus(orderId);
                                // parent.location.href = "/fahuo/order_scan_delivery";
                                // parent.location.reload();
                                // $("#s-define").hide();
                                // $("#s-define_").show();
                            }else {
                                alert(res.msg);
                                parent.layer.close(index);
                                // parent.location.href = "/fahuo/order_scan_delivery";
                            }
                        }
                    });
                }else{
                    $("#s-define").show();
                    $("#s-define_").hide();
                }
            })

        })
    </script>
</head>
<body>

<style type="text/css">
    .record-box2 {
        position: relative;
        /*width: 700px;*/
        padding: 0 5px 20px;
        font-size: 13px;
        color: #787878;
    }

    .record-box2 h2 {
        font-weight: bold;
        font-size: 18px;
        margin-bottom: 40px;
    }

    .record-input, .record-tips {
        width: 320px;
        margin: 0 auto;
        text-align: left;
    }

    .record-input input {
        width: 400px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        padding: 14px 9px;
        border: 1px solid #787878;
    }

    .record-tips {
        padding: 5px 0;
        color: #f00;
        font-size: 13px;
        line-height: 2;
    }

    .record-list {
        margin: 0 auto;
        /*max-height: 300px;*/
        /*width: 600px;*/
        overflow-y: auto;
    }

    .record-list table {
        width: 100%;
    }

    .record-list th, .record-list td {
        padding: 5px 0;
        font-size: 13px;
        text-align: center;
        border: 1px solid #787878;
    }

    .record-list th {
        background: #f2f2f2;
        font-weight: normal;
    }

    .record-list p {
        text-align: center;
        padding: 20px 0;
    }

    .record-list p a {
        display: inline-block;
        padding: 0 30px;
        height: 30px;
        line-height: 30px;
        background-color: #c33;
        color: #fff;
        text-align: center;
        font-size: 14px;
    }

    .record-list p a:hover {
        background-color: #B23131;
    }

    .update {
        display: inline-block;
        margin-left: 15px;
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background: #009789;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        cursor: pointer;
    }

    .update i {
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        background: url();
    }
</style>
<div class="record-box2">
    <h2>请扫描拣货单条形码</h2>
    <div class="record-input">
        <form id="getGoodsForm">
            <input type="text" name="code" readonly="readonly" id="number" th:value="${order.order_num}"
                   autocomplete="off"/>
            <input type="hidden" id="orderId" th:value="${order.id}"/>
        </form>
    </div>
    <div class="record-tips" id="record-tips" style="display: none;"></div>
    <div class="record-list" id="goods_list">
        <form id="form1" method="post" >
            <input type="hidden" name="orderId"  th:value="${order.id}" />
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>图片</th>
                <th>款式</th>
                <th>SKU</th>
                <th>数量</th>
                <th>订单号</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="r-list">
            <tr th:each="item:${order.items}">
                <td th:text="${itemStat.index+1}"></td>
                <td><img th:src="${item.colorImage}" style="width: 50px;height: 50px;" /></td>
                <td style="text-align: left">

                    <span th:text="${item.colorValue}"></span><span th:text="${item.sizeValue}"></span>
                </td>
                <td style="text-align: left" th:text="${item.skuNumber}"></td>
                <td th:text="${item.quantity}">2</td>
                <td style="text-align: left" th:text="${order.order_num}">2</td>
                <td style="text-align: left">

                </td>
            </tr>

            </tbody>
        </table>
        </form>
        <p>
            <button href="javascript:;" id="s-define">确认出库</button>
            <span id="s-define_" style="display: none;" class="update"><i></i>处理中</span>
        </p>
    </div>
</div>

</body>
</html>